<template>
  <footer>
    <!-- 01-上边的网站服务链接 -->
    <div class="foot_top">
      <div class="w total">
        <div>
          <h4>婚庆服务</h4>
          <ul>
            <li><a href="#">婚宴酒店</a></li>
            <li><a href="#">旅拍精选</a></li>
            <li><router-link to="details">婚礼策划</router-link></li>
            <li><router-link to="details">婚礼司仪</router-link></li>
            <li><router-link to="details">婚纱摄影</router-link></li>
            <li><router-link to="details">婚纱礼服</router-link></li>
            <li><router-link to="details">婚礼摄影</router-link></li>
            <li><router-link to="details">婚礼跟拍</router-link></li>
            <li><router-link to="details">婚礼跟妆</router-link></li>
            <li><router-link to="details">婚戒首饰</router-link></li>
          </ul>
        </div>
        <div>
          <h4>婚品采购</h4>
          <ul>
            <li><router-link to="/shoppingindex">新娘礼服</router-link></li>
            <li><router-link to="/shoppingindex">婚房布置</router-link></li>
            <li><router-link to="/shoppingindex">喜糖请帖</router-link></li>
            <li><router-link to="/shoppingindex">鞋包内衣</router-link></li>
            <li><router-link to="/shoppingindex">迎亲堵门</router-link></li>
            <li><router-link to="/shoppingindex">嫁妆购置</router-link></li>
            <li><router-link to="/shoppingindex">新郎穿搭</router-link></li>
            <li><router-link to="/shoppingindex">婚宴现场</router-link></li>
            <li><router-link to="/shoppingindex">新郎美护</router-link></li>
          </ul>
        </div>
        <div>
          <h4>社区·攻略</h4>
          <ul>
            <li><a href="javascript:;">新娘说</a></li>
            <li><a href="javascript:;">结婚问答</a></li>
            <li><router-link to="/list/结婚习俗">婚前事宜</router-link></li>
            <li><router-link to="/list/拍婚纱照">拍婚纱照</router-link></li>
            <li><router-link to="/list/婚庆指南">婚庆防坑</router-link></li>
            <li><router-link to="/list/婚礼现场">婚礼布置</router-link></li>
            <li><a href="javascript:;">新郎新娘</a></li>
            <li><router-link to="/list/结婚邀请">结婚邀请</router-link></li>
            <li><router-link to="/list/结婚用品">结婚用品</router-link></li>
            <li><router-link to="/list/婚礼时光">婚礼时光</router-link></li>
          </ul>
        </div>
        <div>
          <h4>结婚工具</h4>
          <ul>
            <li><a href="#">电子请帖</a></li>
            <li><a href="#">婚礼mv</a></li>
            <li><a href="#">婚礼现场</a></li>
            <li><a href="#">结婚吉日</a></li>
            <li><a href="#">结婚登记处</a></li>
          </ul>
        </div>
        <div>
          <h4>关于我们</h4>
          <ul>
            <li><a href="#">品牌介绍</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">婚礼纪招聘</a></li>
          </ul>
        </div>
        <div id="download">
          <h4>婚礼纪APP</h4>
          <img width="100px" src="../../public/img/wlh/erweima.png" alt="" />
          <div>
            <img width="32px" src="../../public/img/wlh/wechat.png" alt="" />
            <img width="32px" src="../../public/img/wlh/weibo.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 02-中间的友情链接 -->
    <div class="foot_mid">
      <div class="w links">
        <span>友情链接:</span>
        <div>
          <a href="#">旅拍婚纱照</a>
          <a href="#">婚宴酒店预定</a>
          <a href="#">钻戒品牌</a>
          <a href="#">婚纱照</a>
          <a href="#">搜好货</a>
          <a href="#">礼物</a>
          <a href="#">手表品牌排行榜</a>
          <a href="#">企业名录</a>
          <a href="#">有货网</a>
          <a href="#">专升本</a>
          <a href="#">第一黄金网</a>
          <a href="#">房产网</a>
          <a href="#">乐维斯</a>
          <a href="#">装修效果图</a>
          <a href="#">满分作文网</a>
          <a href="#">挽回爱情</a>
          <a href="#">听音乐</a>
          <a href="#">起点8</a>
          <a href="#">什么值得买</a>
          <a href="#">影楼</a>
          <a href="#">装修</a>
          <a href="#">有声小说</a>
          <a href="#">威客</a>
          <a href="#">中国网库</a>
          <a href="#">整形</a>
          <a href="#">结婚产业观察</a>
          <a href="#">化妆品品牌</a>
          <a href="#">律师</a>
        </div>
      </div>
    </div>
    <!-- 03-底部的版权信息 -->
    <div class="foot_bot">
      <div class="w copyright">
        <p>
          <a href="#">浙ICP备13004478号 © 杭州火烧云科技有限公司</a>
          <span>浙公安备案号：33010602006591</span>
          <img src="../../public/img/wlh/fimg.png" alt="" />
        </p>
        <p>
          <span>通讯地址：浙江省杭州市西湖区文一西路98号数娱大厦408</span>
          <span>客服热线：400-159-9090</span>
          <a href="#">经营证照</a>
        </p>
      </div>
    </div>
  </footer>
</template>
<style scoped>
/* 页脚footer样式 */
footer ul li a {
  color: #ccc;
}
.foot_top,
.foot_mid {
  background-color: #222222;
}
.foot_bot {
  background-color: #1a1a1a;
}
.total {
  height: 255px;
  border-bottom: 1px solid #4e4f57;
  box-sizing: border-box;
  padding-top: 50px;
}
.links {
  height: 125px;
  box-sizing: border-box;
}
.copyright {
  height: 100px;
}
.total div:nth-child(-n + 3) {
  width: 150px;
  /* background-color: pink; */
}
.total div:nth-child(n + 4) {
  width: 95px;
  /* background-color:white; */
}
#download {
  width: 100px;
}
.total div {
  float: left;
}
.total div:not(:last-child) {
  margin-right: 90px;
}
.total h4 {
  color: #fff;
  margin-bottom: 15px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.total div ul li {
  font-size: 10px;
  float: left;
  margin-bottom: 10px;
  width: 48px;
  overflow: visible;
  white-space: nowrap;
  height: 16px !important;
}
.total div ul li:nth-child(2n + 1) {
  margin-right: 30px;
}
#download > img {
  margin-bottom: 10px;
}
#download div img:nth-child(1) {
  margin-right: 10px;
}
footer ul li a:hover {
  text-decoration: underline;
}
/* 链接 */
.links {
  padding-top: 40px;
}
.links > span {
  float: left;
  color: #fff;
  font-size: 12px;
  width: 70px;
}
.links > div {
  width: 1130px;
  float: left;
  font-size: 12px;
}
.links > div a {
  margin-right: 15px;
  text-decoration: none;
  color: #ccc;
}
.links > div a:hover {
  text-decoration: underline;
}
/* 底部版权 */
.copyright p {
  text-align: center;
  color: #ccc;
  font-size: 12px;
}
.copyright p a {
  text-decoration: none;
  color: #ccc;
}
.copyright p:first-child {
  padding: 25px 0 15px 0;
}
.copyright p:first-child > span {
  margin: 0 10px 0 10px;
}
.copyright p:nth-child(2) > span:nth-child(2) {
  margin: 0 20px 0 20px;
}
.copyright > p:first-child > img {
  vertical-align: middle;
}
</style>